<!DOCTYPE html>
<head>
	<title>Flip Turn Template</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
	<link href="web/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="web/css/magnific-popup.css" rel="stylesheet" type="text/css"> 
	<link href="web/css/templatemo_style.css" rel="stylesheet" type="text/css">	
</head>
<body>
	<div class="main-container">
		<nav class="main-nav">
			<div id="logo" class="left">李馨玥的主页</a></div>
			<ul class="nav right center-text">
                <li class="btn"><a href="http://list.zilize.cn/">CSIE1701 Home</a></li>
				<li class="btn active">Home</li>
				<li class="btn"><a href="web/about.html">About</a></li>
				<li class="btn"><a href="web/readme.html">Read me</a></li>	
				<li class="btn"><a href="web/intro.html">Intro to LXY</a></li>					
				<li class="btn"><a href="web/contact.html">Contact</a></li>
			</ul>
		</nav>
		<div class="content-container">
			<header>
			<h1 class="center-text">✈🌄李馨玥的旅行相册❤👧✈️</h1>
			<h2 class="center-text">🎀试试把鼠标放在照片上翻转照片有文字解说噢🎀</h2>
			</header>
		<div id="portfolio-content" class="center-text">
			<div class="portfolio-page" id="page-1">
				<div class="portfolio-group">
					<a class="portfolio-item" href="images/DublinCastle-large.jpg">
						<img src="images/DublinCastle-small.jpg" alt="image 1">
						<div class="detail">
							<h3>Dublin Castle</h3>
							<p>这是位于爱尔兰🇮🇪首都都柏林的Dublin Castle都柏林城堡，机智本人取景神仙角度，明信片既视感的童话世界。</p>
							<span class="btn">查看大图</span>
						</div>
					</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="images/FerryToIreland-large.jpg">
						<img src="images/FerryToIreland-small.jpg" alt="image 2">
						<div class="detail">
							<h3>Ferry to Ireland🚢</h3>
							<p>这是从英格兰格拉斯哥去往北爱尔兰首府贝尔法斯特的九层轮渡上，迎着海风，迎着暖阳，怀着对大海对岸土地的憧憬，所有的烦恼都被海风吹散在一望无际的大海上了。</p>
							<span class="btn">查看大图</span>
						</div>
					</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="images/YorkStore-large.jpg">
						<img src="images/YorkStore-small.jpg" alt="image 3">
						<div class="detail">
							<h3>Store in York🔮</h3>
							<p>这是英国约克的一家小店。里面各式各样五彩斑斓的小饰品精巧奇丽。色彩缤纷的手工编织的捕梦网让人仿佛置身童话世界里精灵的小屋。</p>
							<span class="btn">查看大图</span>
						</div>
					</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="images/Nara-large.jpg">
						<img src="images/Nara-small.jpg" alt="image 4">
						<div class="detail">
							<h3>Nara's deer🦌</h3>
							<p>这是日本奈良的鹿🦌在奈良公园鹿随处可见，山坡上、草坪上、街道上、寺院里...鹿与自然与人和谐共处，吸引大批游客前来体验与野生动物零距离接触的自然田园生活。</p>
							<span class="btn">查看大图</span>
						</div>
					</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="images/Kyoto-large.jpg">
						<img src="images/Kyoto-small.jpg" alt="image 5">
						<div class="detail">
							<h3>🏠Kyoto's landlord's car🚗</h3>
							<p>这张照片拍摄于日本京都。身后可爱至极的绿色小车是我们在京都的房东Tomo桑的车，Tomo桑特别和蔼友善，告别的时候专程开他的绿色小车车送我和朋友离开。每次看到这张照片就会想起Tomo午后阳光般的温暖。</p>
							<span class="btn">查看大图</span>
						</div>
					</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="images/Kiyomizu-large.jpg">
						<img src="images/Kiyomizu-small.jpg" alt="image 6">
						<div class="detail">
							<h3>⛩Kiyomizu Temple⛩️</h3>
							<p>这是日本京都的清水寺。橙红色的木构建筑群古色古香，是很典型的日式建筑的风格。还有遍布山路的千本鸟居⛩️，是非常京都特色，非常日本特色的游客必去之处。</p>
							<span class="btn">查看大图</span>
						</div>
					</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="images/Shibuya-large.jpg">
						<img src="images/Shibuya-small.jpg" alt="image 7">
						<div class="detail">
							<h3>🌃A night in Shibuya🌃</h3>
							<p>这是我刚到东京的第一天，当晚朋友就带我去涩谷体验东京繁华商圈的夜晚。熙熙攘攘的人群，五光十色的霓虹灯，居酒屋门口招揽生意的可爱服务生在招呼你进店，通往地下游戏厅的入口通道传来街机音乐和欢快的人声。涩谷的夜，只有欢乐，节日一般的欢乐。</p>
							<span class="btn">查看大图</span>
						</div>
					</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="images/Harashiyama-large.jpg">
						<img src="images/Harashiyama-small.jpg" alt="image 8">
						<div class="detail">
							<h3>Harashiyama🎋</h3>
							<p>跑啊跑啊跑啊跑啊跑啊跑啊跑啊。🎋在岚山的竹林里自在如风。在岚山，没有闹市的喧嚣，清幽的竹林荡涤浮躁的灵魂，让人流连忘返。和最好的朋友在山间小路上自在地奔跑，什么都被我抛下了，无忧无虑，身体很轻很轻，我是一只鸟，是一阵风🌬️。</p>
							<span class="btn">查看大图</span>
						</div>
					</a>				
				</div>
			</div>
			<div class="portfolio-page" id="page-2" style="display:none;">
			<div class="pagination">
				<ul class="nav">
					<li class="active">1</li>
				</ul>
			</div>
		</div>
		</div>
	</div>	<!-- /.content-container -->	
		<footer>
			<p>计科校交1701李馨玥U201714943</p>
		</footer>
	</div>
	<script type="text/javascript" src="web/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="web/js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="web/js/modernizr.2.5.3.min.js"></script>
	<script type="text/javascript" src="web/js/jquery.magnific-popup.min.js"></script> 
	<script type="text/javascript" src="web/js/templatemo_script.js"></script>
	<script type="text/javascript">
		$(function () {
			$('.pagination li').click(changePage);
			$('.portfolio-item').magnificPopup({ 
				type: 'image',
				gallery:{
					enabled:true
				}
			});
		});
	</script>	
</body>
</html>